<!--
/**
* @description 修改密码
* @author mingd
* @date 2020-05-19
*/
-->
<template>
  <div class="editPassword page">
    <!-- 右侧查询 -->
    <a-form-model ref="ruleForm"
                  :model="form"
                  :rules="rules"
                  :label-col="labelCol"
                  :wrapper-col="wrapperCol">
      <a-row :gutter="20">
        <a-col :span="12"
               :offset="6">
          <a-form-model-item label="原始密码"
                             prop="pscode">
            <a-input v-model.trim="form.pscode"
                     type="password"
                     autocomplete="off"
                     placeholder="请输入原始密码"
                     :maxLength="16">
            </a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12"
               :offset="6">
          <a-form-model-item label="新密码"
                             prop="newPscode">
            <a-input v-model.trim="form.newPscode"
                     type="password"
                     autocomplete="off"
                     placeholder="请输入确认新密码"
                     :maxLength="16">
            </a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12"
               :offset="6">
          <a-form-model-item label="确认密码"
                             prop="newPscode2">
            <a-input v-model.trim="form.newPscode2"
                     type="password"
                     autocomplete="off"
                     placeholder="请输入确认密码"
                     :maxLength="16">
            </a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
      <div class="submit-button">
        <a-button type="primary"
                  @click="submitPaw">确定</a-button>
        <a-button @click="cancle">取消</a-button>
      </div>
    </a-form-model>
  </div>
</template>
<script>
import { forceModify } from '@/request/api/permissionManagement/user/user'
import { FormModel, Row, Col, Input, Button } from 'ant-design-vue'
import { setPwaRule } from '@/utils/rule'
import { doSm3AndSm2Encrypt, encryptFromText } from '@/utils/sm'
export default {
  name: 'editPassword',
  components: {
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    ARow: Row,
    ACol: Col,
    AInput: Input,
    AButton: Button
  },
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.form.newPscode) {
        callback(new Error('两次密码不一致!'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      const pwaMode = setPwaRule(value)
      if (pwaMode.modes < 3) {
        callback(new Error(pwaMode.pawMsg))
      } else {
        callback()
      }
    }
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      form: {
        pscode: '',
        newPscode: '',
        newPscode2: ''
      },
      rules: {
        pscode: [
          {
            required: true,
            message: '请输入原始密码',
            trigger: ['blur', 'change']
          }
        ],
        newPscode: [
          {
            required: true,
            message: '请输入新密码',
            trigger: ['blur', 'change']
          },
          { trigger: ['blur', 'change'], validator: validatePassword }
        ],
        newPscode2: [
          {
            required: true,
            message: '请输入确认密码',
            trigger: ['blur', 'change']
          },
          { validator: validatePass2, trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    cancle () {
      this.$refs.ruleForm.resetFields()
    },
    // 提交修改密码
    submitPaw () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.editPassword()
        } else {
          this.$message.error('请完善信息！')
          return false
        }
      })
    },
    // 修改密码调用接口
    editPassword () {
      const user = JSON.parse(localStorage.getItem('ycloud-operate-user_info'))
      let username = ''
      if (user && user.username) {
        username = user.username
      } else {
        this.$message.error('用户信息获取失败')
        return false
      }
      const data = {
        pscode: doSm3AndSm2Encrypt(this.form.pscode),
        newPscode: doSm3AndSm2Encrypt(this.form.newPscode),
        username: username,
        sign: encryptFromText(username)
      }
      forceModify(data)
        .then(async res => {
          this.$message.success('修改密码成功，请重新登录')
          // 调退出登录方法 清缓存 清除store的数据
          await this.$store.dispatch('logout')
          this.$router.push({ path: '/signIn' })
        })
        .catch(error => {
          console.log(error.response.data.message)
        })
    }
  }
}
</script>
<style lang="scss">
.editPassword {
  width: 100%;
  text-align: center;
  padding-top: 50px;
}
.submit-button {
  width: 100%;
  text-align: center;
}
</style>
